<template>
  <div class="min-h-screen bg-base-100">
    <div class="blog-container">
      <div class="flex items-center justify-between mb-6">
        <h1 class="text-3xl font-bold">博客列表</h1>
        <RouterLink to="/editor" class="btn btn-primary">
          <icon-plus class="w-5 h-5 mr-2" />
          写文章
        </RouterLink>
      </div>

      <!-- 标签筛选 -->
      <div class="mb-8 flex flex-wrap gap-2">
        <button 
          @click="selectedTagId = ''" 
          class="btn btn-sm" 
          :class="{ 'btn-primary': !selectedTagId, 'btn-outline': selectedTagId }">
          全部
        </button>
        <button 
          v-for="tag in tags" 
          :key="tag.id" 
          @click="selectedTagId = tag.id"
          class="btn btn-sm" 
          :class="{ 'btn-primary': selectedTagId === tag.id, 'btn-outline': selectedTagId !== tag.id }">
          {{ tag.name }}
        </button>
      </div>

      <!-- 搜索 -->
      <div class="relative mb-8">
        <icon-search class="absolute left-3 top-1/2 transform -translate-y-1/2 w-5 h-5 text-gray-400" />
        <input 
          v-model="searchQuery" 
          type="text" 
          placeholder="搜索文章..." 
          class="input input-bordered w-full pl-10" />
      </div>

      <!-- 文章列表 -->
      <div v-if="filteredPosts.length > 0" class="space-y-6">
        <div v-for="post in filteredPosts" :key="post.id" 
             class="card bg-base-100 shadow-lg border border-base-200 card-hover">
          <div class="card-body p-6">
            <div class="flex items-start">
              <div v-if="post.coverImage" class="mr-6 w-48 h-32 overflow-hidden rounded-lg shrink-0">
                <img :src="post.coverImage" :alt="post.title" class="w-full h-full object-cover" />
              </div>
              
              <div class="flex-1">
                <h2 class="card-title text-2xl mb-2">
                  <RouterLink :to="`/blog/${post.id}`" class="hover:text-primary">
                    {{ post.title }}
                  </RouterLink>
                </h2>
                
                <div class="mb-3 text-sm opacity-70">
                  <span>{{ formatDate(post.publishedAt) }}</span>
                  <span class="mx-2">•</span>
                  <span>{{ post.author }}</span>
                </div>
                
                <p class="mb-4">{{ post.excerpt || truncateContent(post.content) }}</p>
                
                <div class="flex items-center justify-between">
                  <div class="flex flex-wrap gap-2">
                    <span 
                      v-for="tagId in post.tags" 
                      :key="tagId" 
                      class="badge badge-outline">
                      {{ getTagName(tagId) }}
                    </span>
                  </div>
                  
                  <RouterLink :to="`/blog/${post.id}`" class="btn btn-sm btn-primary">
                    阅读全文
                  </RouterLink>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
      
      <!-- 无文章提示 -->
      <div v-else class="text-center py-16">
        <icon-file-question class="w-16 h-16 mx-auto text-base-300" />
        <p class="mt-4 text-lg">暂无博客文章</p>
        <p v-if="searchQuery || selectedTagId" class="mt-2 text-base-content/70">
          尝试清除筛选条件或搜索关键词
        </p>
        <div class="mt-4">
          <button @click="clearFilters" class="btn btn-outline mr-2">清除筛选</button>
          <RouterLink to="/editor" class="btn btn-primary">写文章</RouterLink>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed } from 'vue';
import { useBlogStore } from '@/stores/blogStore';
import type { BlogPost, Tag } from '@/types';

const blogStore = useBlogStore();
const searchQuery = ref('');
const selectedTagId = ref('');

// 获取所有标签
const tags = computed(() => blogStore.tags);

// 格式化日期
const formatDate = (dateStr: string) => {
  if (!dateStr) return '';
  const date = new Date(dateStr);
  return date.toLocaleDateString('zh-CN', {
    year: 'numeric',
    month: 'long',
    day: 'numeric'
  });
};

// 获取标签名称
const getTagName = (tagId: string) => {
  const tag = blogStore.getTagById(tagId);
  return tag ? tag.name : '';
};

// 截断内容
const truncateContent = (content: string): string => {
  if (content.length <= 100) return content;
  return content.substring(0, 100) + '...';
};

// 筛选文章
const filteredPosts = computed(() => {
  let posts = blogStore.getPublishedPosts;
  
  // 按标签筛选
  if (selectedTagId.value) {
    posts = posts.filter(post => post.tags.includes(selectedTagId.value));
  }
  
  // 按搜索词筛选
  if (searchQuery.value) {
    const query = searchQuery.value.toLowerCase();
    posts = posts.filter(
      post => 
        post.title.toLowerCase().includes(query) || 
        post.content.toLowerCase().includes(query) ||
        post.excerpt.toLowerCase().includes(query)
    );
  }
  
  return posts;
});

// 清除筛选条件
const clearFilters = () => {
  searchQuery.value = '';
  selectedTagId.value = '';
};
</script> 